<template>
	<view class="bg" :style="'min-height:'+windowHeight+'px'">
		<view class="bg__content" :style="'display:'+isShow+';'">
			<view class="bg__content__first">
				<view class="bg__content__first__image">
					<image :src="data.image_url" mode="heightFix"></image>
					<!-- <image src="../../static/person-p-INTP.png" mode="heightFix"></image> -->
				</view>
				<view class="bg__content__first__text">
					<view class="bg__content__first__text__head">
						<view class="bg__content__first__text__head__left">{{data.name}}</view>
						<view class="bg__content__first__text__head__right">{{data.renge}}</view>
					</view>
					<view class="bg__content__first__text__foot">
						{{data.jdjs}}
					</view>
				</view>
			</view>
			<view class="bg__content__second">
				<block v-for="(item,index) in data.rs" :key="index">
					<view class="bg__content__second__nr" :style="'background-color:'+item.color">{{item.win}}</view>
				</block>
				
				
			</view>
			<view class="bg__content__third">
				<view class="bg__content__third__title">
					性格偏向
				</view>
				<block v-for="(item,index) in data.rs" :key="index">
				<view class="bg__content__third__nr">
					<block v-if="item.name == item.win">
						<view class="bg__content__third__nr__1" :style="'color:'+item.color">{{item.zh_name.name}}({{item.name}})</view>
					</block>
					<block v-else>
						<view class="bg__content__third__nr__1" >{{item.zh_name.name}}({{item.name}})</view>
					</block>
					<view class="bg__content__third__nr__2">
						
						<block v-if="item.name == item.win">
							<view class="bg__content__third__nr__2__progress">
								<view class="bg__content__third__nr__2__progress__bar" :style="'width:'+item.bfb+'%;background-color:'+item.color">
									<view class="bg__content__third__nr__2__progress__bar__bfb">{{item.bfb[0]}}%</view>
								</view>
							</view>
						</block>
						<block v-else>
							<view class="bg__content__third__nr__2__progress" :style="'justify-content:flex-end;'">
								<view class="bg__content__third__nr__2__progress__bar" :style="'justify-content:flex-start;width:'+item.bfb[0]+'%;background-color:'+item.color">
									<view class="bg__content__third__nr__2__progress__bar__bfb" :style="'justify-content:flex-start;margin-left:10px;'">{{item.bfb[0]}}%</view>
								</view>
							</view>
						</block>
						
						
						<!-- <u-line-progress :percentage="item.bfb"  height="12" :activeColor="item.color"></u-line-progress> -->
					</view>
					<block v-if="item.name2 == item.win">
						<view class="bg__content__third__nr__3" :style="'color:'+item.color">{{item.zh_name2.name}}({{item.name2}})</view>
					</block>
					<block v-else>
						<view class="bg__content__third__nr__3">{{item.zh_name2.name}}({{item.name2}})</view>
					</block>
					
				</view>
				</block>
			</view>
			
			<view class="bg__content__fourth">
				<view class="bg__content__fourth__title">
					{{data.name}}性格特点
				</view>
				<view class="bg__content__fourth__text">
					
					<rich-text :nodes="data.renge2"></rich-text>
				</view>
			</view>
			<view class="bg__content__fifth">
				<view class="bg__content__fifth__look"  @click="tishi()">免费解锁我的个人报告</view>
			</view>
			
		</view>
		
		<u-modal
					content="观看一小段精彩视频后，即可查看详细报告"
					:show="tanchuangShow"
					showCancelButton
					closeOnClickOverlay
					@confirm="confirm"
					@cancel="cancel"
					@close="close"
				></u-modal>
		
		
	</view>
</template>


<script>
	let videoAd = null;
	import unils from "../../unils/utils.js"
	import config from "../../common/config.js"
	export default {
		data() {
			return {
				windowHeight:600,
				data:"",
				result:'',
				isShow:'none',
				tanchuangShow:false,
				
			}
		},
		onLoad(option) {
			var systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;	
			// console.log(option.result);
			this.result = option.result;
			this.submit(this.result);
			// #ifdef MP
			
			this.adLoad();
			
			// #endif
		},
		methods: {
			confirm(){
				this.tanchuangShow = false;
				this.openVideoAd();
			},
			close(){
				console.log('close');
				this.tanchuangShow = false;
			},
			cancel() {
				this.tanchuangShow = false
				console.log('cancel');
			},
			tishi(){
				this.tanchuangShow = true;
			},
			adLoad: function() {
				
				if (wx.createRewardedVideoAd) {
				  videoAd = wx.createRewardedVideoAd({
				    adUnitId: 'adunit-97ba4f337036fabe'
				  })
				  videoAd.onLoad(() => {
					  console.log('激励视频 广告加载成功')
				  })
				  videoAd.onError((err) => {
				    console.error('激励视频光告加载失败', err)
				  })
				  videoAd.onClose((res) => {
					  // 用户点击了【关闭广告】按钮
					      if (res && res.isEnded) {
					        // 正常播放结束，可以下发游戏奖励
							this.xiangxibaogao();
					      } else {
								// 播放中途退出，不下发游戏奖励
								unils.costomShowToast('您需要看完广告才能获取个人报告哦！');
					      }
				  })
				}

			},
			openVideoAd: function() {
				
				if (videoAd) {
					videoAd.show().catch(err => {
					// 失败重试
					
					// console.log("广告拉去失败")
				
					videoAd.load()
					    .then(() => videoAd.show())
					    .catch(err => {
					      console.log('激励视频 广告显示失败')
					    })
				
					})
				
				}
			
			},
			
			xiangxibaogao:function(){
				console.log(this.result);
				uni.navigateTo({
					url:"/pages/index/result2?result="+this.result,
				})
				
			},
			submit:function(result){
				uni.showLoading({
					title: '加载中'
				});
				var that = this;
				
				var params = {rs:result};
				that.$http('xgcs.submit', params).then(res => {
					if(res.code == 1){
						that.data = res.data;
						
						that.isShow = 'block';
						uni.hideLoading();
						// console.log(that.data.image_url);
						// console.log(res.data.rs[0].win);
						
					} else if(res.code == 99){
						// console.log('ddddddddddddd');
						
					} else {
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "css/result.scss";
</style>